import "./index.scss";
import backIcon from "../../static/images/back_light.png";
import homeIcon from "../../static/images/tb_home.png";
import utils from "../../utils/sys";
import { useEffect, useState, useMemo } from "react";
import PropTypes from "prop-types";
import Taro, { useLoad } from "@tarojs/taro";
import { Navigator } from "@tarojs/components";

const Navbar = ({ isHome, titleText }) => {
  const [statusBarHeight, setStatusBarHeight] = useState(0);
  const [menuInfo, setMenuInfo] = useState({});

  const textStyle = {};
  const iconStyle = [
    {
      width: "24rpx",
      height: "24rpx",
    },
  ];

  const containerStyle = useMemo(
    () => ({
      marginTop: `${statusBarHeight}px`,
    }),
    [statusBarHeight]
  );

  useLoad(() => {
    const { statusBarHeight } = utils.getSystemInfo();
    setStatusBarHeight(statusBarHeight);
    // 获取胶囊按钮的信息
    const menuBtnInfo = Taro.getMenuButtonBoundingClientRect();
    console.log("🚀 ~ useEffect ~ menuBtnInfo:", menuBtnInfo);
    setMenuInfo(menuBtnInfo);
  });

  const handleBack = () => {
    Taro.navigateBack();
  };

  return (
    <view className="nav" style={containerStyle}>
      {isHome ? (
        <view className="head-nav">
          <view className="head-nav_left">
            <text className="iconfont icon-fenleiA"></text>
            <text className="city">中部地区</text>
            <text className="iconfont icon-arrow"></text>
          </view>
          <view
            className="head-search"
            style={{ marginRight: menuInfo.width + "px" }}
          >
            <Navigator className="search-box" url="pages/search/index">
              <text
                style={{ fontSize: "14px" }}
                className="iconfont icon-a-searchbar-search"
              ></text>
              <text className="nav-text">找医院</text>
            </Navigator>
          </view>
        </view>
      ) : (
        <view className="nav-left" style="{textStyle,iconStyle}">
          {!isHome ? (
            <image
              onClick={handleBack}
              src={backIcon}
              mode="scaleToFill"
            ></image>
          ) : (
            <image src={homeIcon} mode="scaleToFill"></image>
          )}
        </view>
      )}
      {titleText && (
        <view className="nav-title">
          <view className="">{titleText}</view>
        </view>
      )}
    </view>
  );
};

Navbar.props = {
  background: PropTypes.string,
  titleText: PropTypes.string,
  iconStyle: PropTypes.object,
  textStyle: PropTypes.object,
  isHome: PropTypes.bool,
};

Navbar.defaultProps = {
  background: "",
  titleText: "",
  iconStyle: {},
  textStyle: {},
  isHome: true,
};

export default Navbar;
